<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/css/jsdeliverbootstrap.min.css">
<!--    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"-->
<!--          integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">-->

    <link rel="stylesheet" href="../css/pet-store-plus.css">
    <link rel="stylesheet" href="/css/staticfilebootstrap.min.css">
    <link rel="stylesheet" href="../css/bootstrap.css">
<!--    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">-->
<!--    <link rel="stylesheet" href="/css/bootstrap-icons.css">-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <script src="/js/chart.js"></script>
<!--    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>-->

</head>
<body>
<div class="top">
    <img src="../images/logo-topbar.gif" style="display: inline-block; vertical-align: middle;">
    <a id="signOut" href="/admin/signOut" style="display: inline-block">Sign Out</a>

</div>

<div class="sidebar" id="sidebar">
    <a id="showDataLink" class="option" href="/admin/showData" >首页</a>

    <a id="ItemLink" class="option">商品管理 <i class="bi bi-chevron-right"></i><i class="bi bi-chevron-down" style="display: none"></i></a>
    <a id="CategoryLink" class="commodity option" href="/admin/Category" >Category</a>
    <a id="ProductLink" class="commodity option" href="/admin/Product1" >Product</a>
    <a id="ItemLink1" class="commodity option"  href="/admin/showItem">Item</a>
    <a id="ordersLink"  class="option" href="/admin/orders">订单管理</a>
    <a id="userLink" class="option" href="/admin/user" >用户管理</a>
    <a id="messageLink" class="option" href="/admin/message">消息</a>
    <a id="adminLink" class="option" href="/admin/admin">权限管理</a>
</div>
<script th:inline="javascript">

    window.addEventListener('load', function() {


        // 第一个事件处理程序
        var adminid = [[${session.loginAdmin.adminname}]] ? [[${session.loginAdmin.adminname}]] : null;
        console.log(adminid+" adminid");
        if (adminid !== 'admin') {
            console.log('2222');
            document.getElementById('adminLink').style.display = 'none';
        }
        console.log(document.title);
        var links = document.querySelectorAll(".option");
        console.log('links='+links)
                // 移除所有选项的 "active" 类
                links.forEach(function(item) {
                    item.class="option";
                    // item.classList.remove("active");
                });
                // 将当前点击的选项添加 "active" 类
        switch (document.title){
            case '数据管理': document.getElementById('showDataLink').classList.add("active"); break;
            case 'Category管理': document.getElementById('CategoryLink').classList.add("active"); break;
            case 'Product管理': document.getElementById('ProductLink').classList.add("active"); break;
            case 'Item管理': document.getElementById('ItemLink1').classList.add("active"); break;
            // case '添加商品': document.getElementById('ItemLink').classList.add("active"); break;
            case '订单管理': document.getElementById('ordersLink').classList.add("active"); break;
            case '用户管理': document.getElementById('userLink').classList.add("active"); break;
            case '消息': document.getElementById('messageLink').classList.add("active"); break;
            case '权限管理': document.getElementById('adminLink').classList.add("active"); break;
        }

    });

    document.getElementById('ItemLink').addEventListener('click',function(){
        var itemLink=document.getElementById(('ItemLink'));
        var chevron_right=document.querySelector('.bi-chevron-right');
        var chevron_down=document.querySelector('.bi-chevron-down');
        console.log('222');
            var commodityLinks=document.querySelectorAll(".commodity");
            commodityLinks.forEach(function (link){
                if (link.style.display === "flex") {
                    // 如果当前为 flex，则改为 none
                    link.style.display = "none";
                    itemLink.style.backgroundColor="#333";
                    chevron_down.style.display='none';
                    chevron_right.style.display='flex';
                } else {
                    // 如果当前为 none，则改为 flex
                    link.style.display = "flex";
                    itemLink.style.backgroundColor="#4bb97e";
                    chevron_down.style.display='flex';
                    chevron_right.style.display='none';
                }
            })
    })





</script>
</body>
</html>